<template>
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        v-loading="loading"
        :table-opts="tableOpts"
        :pagination-data="{
          total:total,
          queryParams:queryParams
        }"
        @pagination="getList"
        @searchChange="handleQuery"
        @searchReset="handleReset"
      />
    </div>
    <OperationDialog ref="operationRef" />
  </div>
</template>

<script>
import { logPage } from '@/framework/api/developerCenter/operationLog'
import OperationDialog from './components/OperationDialog.vue'

export default {
  name: 'OperateLog',
  components: {
    OperationDialog
  },
  data() {
    return {
      loading: false,
      queryParams: {
        allDate: '',
        beginDate: '',
        endDate: '',
        logContent: '',
        pageNo: 1,
        pageSize: 10,
        appName: ''
      },
      total: 0,
      log: {
        annex: {
          successList: ''
        }
      },
      form: {},
      options: {},
      tableOpts: {
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'allDate',
            label: '创建时间',
            show: false,
            search: true,
            type: 'datetimerange',
            labelWidth: '70px'
          },
          {
            prop: 'account',
            label: '账号',
            show: true
          },
          {
            prop: 'realName',
            label: '用户姓名',
            show: true
          },
          {
            prop: 'appName',
            label: '服务名称',
            show: true,
            search: true,
            labelWidth: '70px'
          },
          {
            prop: 'logModule',
            label: '操作模块',
            show: true
          },
          {
            prop: 'logContent',
            label: '日志名称',
            show: true,
            search: true,
            labelWidth: '70px'
          },
          {
            prop: 'requestUrl',
            label: '请求地址',
            show: true
          },
          {
            prop: 'clientIp',
            label: '客户端IP',
            show: true
          },
          {
            prop: 'serverIp',
            label: '服务端IP',
            show: true
          },
          {
            prop: 'clientBrowser',
            label: '浏览器',
            show: true
          },
          {
            prop: 'clientOs',
            label: '操作系统',
            show: true
          },
          {
            prop: 'status',
            label: '状态',
            show: true,
            formatter: (row) => { return row.status === 0 ? '成功' : row.status === 1 ? '逻辑失败' : '异常失败' }
          },
          {
            prop: 'failReason',
            label: '失败原因',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          }

        ],
        operator: {
          width: 96,
          fixed: 'right',
          operatorBtn: [
            { text: '详情', permission: ['APPLICATIONMAG_UPDATE_BUTTON'], click: (row, col, cellValue) => { return this.handleDetail(row) } }
          ]
        }
      }

    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      if (this.queryParams.allDate) {
        this.queryParams.beginDate = this.queryParams.allDate[0]
        this.queryParams.endDate = this.queryParams.allDate[1]
      } else {
        this.queryParams.beginDate = ''
        this.queryParams.endDate = ''
      }
      logPage(this.queryParams).then((resp) => {
        this.tableOpts.tableData = [...resp.data.rows]
        this.total = resp.data.totalRows
      })
    },
    // 搜索
    handleQuery(formModel) {
      this.queryParams = Object.assign(this.queryParams, formModel)
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        allDate: '',
        beginDate: '',
        endDate: '',
        logContent: '',
        appName: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    handleDetail(row) {
      this.$refs.operationRef.openDialog(row)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

